<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>会员首页 - 社交圈</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    :root {
      --primary: #5B7BDF;
      --primary-light: #E8EBFA;
      --secondary: #FF7D54;
      --success: #4CAF50;
      --text-primary: #1D2129;
      --text-secondary: #86909C;
      --bg-light: #F2F3F5;
      --bg-white: #FFFFFF;
      --border-light: #E5E6EB;
      --premium: #FFD700;
    }
    
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background-color: var(--bg-light);
      color: var(--text-primary);
      line-height: 1.6;
      font-size: 15px;
    }
    
    /* 顶部导航 */
    .navbar {
      background-color: var(--primary);
      color: white;
      padding: 0.75rem 1rem;
    }
    
    .navbar-nav .nav-link {
      color: rgba(255, 255, 255, 0.9);
      padding: 0.5rem 0.75rem;
    }
    
    .navbar-nav .nav-link.active {
      color: white;
      font-weight: 500;
    }
    
    /* 个人资料头部 */
    .profile-header {
      background: linear-gradient(135deg, var(--primary), #4A69D9);
      color: white;
      padding-top: 20px;
      padding-bottom: 60px;
      position: relative;
    }
    
    .cover-photo {
      height: 140px;
      background: url('https://picsum.photos/1000/300?random=10') center/cover no-repeat;
      position: relative;
    }
    
    .cover-overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0,0,0,0.2);
    }
    
    .profile-actions {
      position: absolute;
      top: 15px;
      right: 15px;
    }
    
    .profile-avatar {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      border: 4px solid white;
      object-fit: cover;
      margin-top: -50px;
      position: relative;
    }
    
    .premium-badge {
      position: absolute;
      bottom: 0;
      right: 0;
      width: 30px;
      height: 30px;
      background-color: var(--premium);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 2px solid white;
    }
    
    .profile-name {
      font-size: 20px;
      font-weight: 600;
      margin-bottom: 5px;
    }
    
    .profile-title {
      color: rgba(255, 255, 255, 0.85);
      font-size: 14px;
      margin-bottom: 10px;
    }
    
    .profile-stats {
      display: flex;
      justify-content: space-around;
      margin-top: 15px;
      text-align: center;
    }
    
    .stat-value {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 3px;
    }
    
    .stat-label {
      font-size: 12px;
      color: rgba(255, 255, 255, 0.8);
    }
    
    /* 功能菜单 */
    .feature-menu {
      background-color: var(--bg-white);
      border-radius: 12px;
      margin: -30px 15px 15px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.05);
      padding: 15px 0;
    }
    
    .menu-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
    }
    
    .menu-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 10px 5px;
      color: var(--text-primary);
      text-decoration: none;
    }
    
    .menu-icon {
      width: 45px;
      height: 45px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 8px;
      font-size: 20px;
    }
    
    .menu-label {
      font-size: 12px;
      font-weight: 500;
    }
    
    /* 内容区块 */
    .content-section {
      background-color: var(--bg-white);
      border-radius: 12px;
      margin: 0 15px 15px;
      overflow: hidden;
    }
    
    .section-header {
      padding: 15px 15px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid var(--border-light);
    }
    
    .section-title {
      font-size: 16px;
      font-weight: 600;
    }
    
    .section-more {
      color: var(--primary);
      font-size: 14px;
      text-decoration: none;
    }
    
    /* 动态预览 */
    .feed-preview {
      padding: 15px;
    }
    
    .feed-item {
      margin-bottom: 15px;
    }
    
    .feed-item:last-child {
      margin-bottom: 0;
    }
    
    .feed-text {
      font-size: 14px;
      margin-bottom: 10px;
    }
    
    .feed-images {
      display: flex;
      gap: 5px;
      border-radius: 8px;
      overflow: hidden;
    }
    
    .feed-image {
      width: 33.333%;
      aspect-ratio: 1;
      object-fit: cover;
    }
    
    .feed-actions {
      display: flex;
      font-size: 12px;
      color: var(--text-secondary);
      margin-top: 8px;
      gap: 15px;
    }
    
    .feed-action {
      display: flex;
      align-items: center;
      gap: 3px;
    }
    
    /* 会员特权 */
    .privileges-list {
      padding: 10px 15px;
    }
    
    .privilege-item {
      display: flex;
      align-items: center;
      padding: 12px 0;
      border-bottom: 1px solid var(--border-light);
    }
    
    .privilege-item:last-child {
      border-bottom: none;
    }
    
    .privilege-icon {
      width: 36px;
      height: 36px;
      border-radius: 8px;
      background-color: var(--primary-light);
      color: var(--primary);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      margin-right: 12px;
    }
    
    .privilege-info {
      flex: 1;
    }
    
    .privilege-title {
      font-size: 15px;
      font-weight: 500;
      margin-bottom: 2px;
    }
    
    .privilege-desc {
      font-size: 12px;
      color: var(--text-secondary);
    }
    
    /* 推荐关注 */
    .suggestions-list {
      padding: 10px 15px;
    }
    
    .suggestion-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 0;
      border-bottom: 1px solid var(--border-light);
    }
    
    .suggestion-item:last-child {
      border-bottom: none;
    }
    
    .suggestion-user {
      display: flex;
      align-items: center;
    }
    
    .suggestion-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      object-fit: cover;
      margin-right: 10px;
    }
    
    .suggestion-info {
      display: flex;
      flex-direction: column;
    }
    
    .suggestion-name {
      font-size: 14px;
      font-weight: 500;
    }
    
    .suggestion-meta {
      font-size: 12px;
      color: var(--text-secondary);
    }
    
    .follow-btn {
      background-color: var(--primary);
      color: white;
      border: none;
      border-radius: 20px;
      padding: 5px 12px;
      font-size: 13px;
      font-weight: 500;
    }
    
    /* 底部导航 */
    .bottom-nav {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: var(--bg-white);
      border-top: 1px solid var(--border-light);
      display: flex;
      justify-content: space-around;
      padding: 8px 0;
      z-index: 1000;
    }
    
    .nav-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      color: var(--text-secondary);
      text-decoration: none;
      font-size: 10px;
      flex: 1;
    }
    
    .nav-item.active {
      color: var(--primary);
    }
    
    .nav-icon {
      font-size: 20px;
      margin-bottom: 3px;
    }
    
    /* 发布按钮 */
    .fab-button {
      position: fixed;
      bottom: 70px;
      right: 20px;
      width: 55px;
      height: 55px;
      border-radius: 50%;
      background-color: var(--primary);
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      box-shadow: 0 4px 12px rgba(91, 123, 223, 0.4);
      border: none;
      z-index: 1000;
    }
  </style>
</head>
<body>
  <!-- 顶部导航 -->
  <nav class="navbar navbar-expand">
    <div class="container-fluid">
      <ul class="navbar-nav w-100 justify-content-between">
        <li class="nav-item">
          <a class="nav-link" href="#" aria-label="返回">
            <i class="fa fa-arrow-left"></i>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link active" href="#">我的主页</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#" aria-label="设置">
            <i class="fa fa-cog"></i>
          </a>
        </li>
      </ul>
    </div>
  </nav>
  
  <!-- 个人资料头部 -->
  <div class="profile-header">
    <div class="cover-photo">
      <div class="cover-overlay"></div>
      <div class="profile-actions">
        <button class="btn btn-light btn-sm rounded-pill">
          <i class="fa fa-camera mr-1"></i> 更换封面
        </button>
      </div>
    </div>
    
    <div class="container px-4">
      <div class="d-flex flex-column align-items-center">
        <div style="position: relative;">
          <img src="https://picsum.photos/200/200?random=1" alt="个人头像" class="profile-avatar">
          <div class="premium-badge">
            <i class="fa fa-diamond text-xs" style="color: #8B6914;"></i>
          </div>
        </div>
        
        <h1 class="profile-name">陈嘉欣</h1>
        <p class="profile-title">高级UI/UX设计师 | 热爱生活的创作者</p>
        
        <div class="d-flex gap-3 mt-2">
          <button class="btn btn-light text-primary rounded-pill px-4">
            <i class="fa fa-pencil mr-1"></i> 编辑资料
          </button>
          <button class="btn btn-secondary rounded-pill px-4">
            <i class="fa fa-share-alt mr-1"></i> 分享
          </button>
        </div>
      </div>
      
      <div class="profile-stats">
        <div>
          <div class="stat-value">248</div>
          <div class="stat-label">动态</div>
        </div>
        <div>
          <div class="stat-value">1.2k</div>
          <div class="stat-label">粉丝</div>
        </div>
        <div>
          <div class="stat-value">356</div>
          <div class="stat-label">关注</div>
        </div>
        <div>
          <div class="stat-value">32.5k</div>
          <div class="stat-label">获赞</div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 功能菜单 -->
  <div class="feature-menu">
    <div class="menu-grid">
      <a href="#" class="menu-item">
        <div class="menu-icon" style="background-color: #E8F5E9; color: #4CAF50;">
          <i class="fa fa-star"></i>
        </div>
        <span class="menu-label">我的收藏</span>
      </a>
      <a href="#" class="menu-item">
        <div class="menu-icon" style="background-color: #E3F2FD; color: #2196F3;">
          <i class="fa fa-clock-o"></i>
        </div>
        <span class="menu-label">浏览历史</span>
      </a>
      <a href="#" class="menu-item">
        <div class="menu-icon" style="background-color: #FCE4EC; color: #E91E63;">
          <i class="fa fa-heart"></i>
        </div>
        <span class="menu-label">收到的赞</span>
      </a>
      <a href="#" class="menu-item">
        <div class="menu-icon" style="background-color: #FFF3E0; color: #FF9800;">
          <i class="fa fa-gift"></i>
        </div>
        <span class="menu-label">我的礼物</span>
      </a>
      <a href="#" class="menu-item">
        <div class="menu-icon" style="background-color: #F3E5F5; color: #9C27B0;">
          <i class="fa fa-trophy"></i>
        </div>
        <span class="menu-label">会员特权</span>
      </a>
      <a href="#" class="menu-item">
        <div class="menu-icon" style="background-color: #E0F7FA; color: #00BCD4;">
          <i class="fa fa-briefcase"></i>
        </div>
        <span class="menu-label">我的订单</span>
      </a>
      <a href="#" class="menu-item">
        <div class="menu-icon" style="background-color: #ECEFF1; color: #607D8B;">
          <i class="fa fa-cog"></i>
        </div>
        <span class="menu-label">账号设置</span>
      </a>
      <a href="#" class="menu-item">
        <div class="menu-icon" style="background-color: #FFEBEE; color: #F44336;">
          <i class="fa fa-question-circle"></i>
        </div>
        <span class="menu-label">帮助中心</span>
      </a>
    </div>
  </div>
  
  <!-- 内容区块：最新动态 -->
  <div class="content-section">
    <div class="section-header">
      <h2 class="section-title">最新动态</h2>
      <a href="#" class="section-more">查看全部</a>
    </div>
    
    <div class="feed-preview">
      <div class="feed-item">
        <p class="feed-text">今天完成了一个重要的设计项目，分享几张设计稿预览，欢迎大家提出宝贵意见~</p>
        <div class="feed-images">
          <img src="https://picsum.photos/300/300?random=20" alt="设计稿1" class="feed-image">
          <img src="https://picsum.photos/300/300?random=21" alt="设计稿2" class="feed-image">
          <img src="https://picsum.photos/300/300?random=22" alt="设计稿3" class="feed-image">
        </div>
        <div class="feed-actions">
          <div class="feed-action">
            <i class="fa fa-comment-o"></i> 24
          </div>
          <div class="feed-action">
            <i class="fa fa-retweet"></i> 8
          </div>
          <div class="feed-action">
            <i class="fa fa-heart"></i> 156
          </div>
        </div>
      </div>
      
      <div class="feed-item">
        <p class="feed-text">推荐一本最近在读的设计书籍《简约至上》，对于UI设计很有启发，尤其是关于如何平衡功能与美观的部分，值得一读！</p>
        <div class="feed-actions">
          <div class="feed-action">
            <i class="fa fa-comment-o"></i> 37
          </div>
          <div class="feed-action">
            <i class="fa fa-retweet"></i> 23
          </div>
          <div class="feed-action">
            <i class="fa fa-heart"></i> 98
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 内容区块：会员特权 -->
  <div class="content-section">
    <div class="section-header">
      <h2 class="section-title">会员特权</h2>
      <a href="#" class="section-more">更多特权</a>
    </div>
    
    <div class="privileges-list">
      <div class="privilege-item">
        <div class="privilege-icon">
          <i class="fa fa-paint-brush"></i>
        </div>
        <div class="privilege-info">
          <div class="privilege-title">专属主题皮肤</div>
          <div class="privilege-desc">使用10套会员专属主题，彰显个性</div>
        </div>
      </div>
      
      <div class="privilege-item">
        <div class="privilege-icon">
          <i class="fa fa-ban"></i>
        </div>
        <div class="privilege-info">
          <div class="privilege-title">无广告体验</div>
          <div class="privilege-desc">去除所有页面广告，享受纯净浏览</div>
        </div>
      </div>
      
      <div class="privilege-item">
        <div class="privilege-icon">
          <i class="fa fa-cloud-upload"></i>
        </div>
        <div class="privilege-info">
          <div class="privilege-title">高清图片上传</div>
          <div class="privilege-desc">支持原图上传，最大50MB/张</div>
        </div>
      </div>
      
      <div class="privilege-item">
        <div class="privilege-icon">
          <i class="fa fa-eye"></i>
        </div>
        <div class="privilege-info">
          <div class="privilege-title">谁看过我</div>
          <div class="privilege-desc">查看最近30天访问过你主页的用户</div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 内容区块：推荐关注 -->
  <div class="content-section">
    <div class="section-header">
      <h2 class="section-title">为你推荐</h2>
      <a href="#" class="section-more">换一批</a>
    </div>
    
    <div class="suggestions-list">
      <div class="suggestion-item">
        <div class="suggestion-user">
          <img src="https://picsum.photos/200/200?random=30" alt="推荐用户1" class="suggestion-avatar">
          <div class="suggestion-info">
            <span class="suggestion-name">李明设计</span>
            <span class="suggestion-meta">UI设计师 · 128个共同好友</span>
          </div>
        </div>
        <button class="follow-btn">关注</button>
      </div>
      
      <div class="suggestion-item">
        <div class="suggestion-user">
          <img src="https://picsum.photos/200/200?random=31" alt="推荐用户2" class="suggestion-avatar">
          <div class="suggestion-info">
            <span class="suggestion-name">创意工坊</span>
            <span class="suggestion-meta">设计工作室 · 发布了326篇内容</span>
          </div>
        </div>
        <button class="follow-btn">关注</button>
      </div>
      
      <div class="suggestion-item">
        <div class="suggestion-user">
          <img src="https://picsum.photos/200/200?random=32" alt="推荐用户3" class="suggestion-avatar">
          <div class="suggestion-info">
            <span class="suggestion-name">张思远</span>
            <span class="suggestion-meta">产品经理 · 常聊设计话题</span>
          </div>
        </div>
        <button class="follow-btn">关注</button>
      </div>
    </div>
  </div>
  
  <!-- 底部导航 -->
  <div class="bottom-nav">
    <a href="#" class="nav-item">
      <i class="fa fa-home nav-icon"></i>
      <span>首页</span>
    </a>
    <a href="#" class="nav-item">
      <i class="fa fa-compass nav-icon"></i>
      <span>发现</span>
    </a>
    <a href="#" class="nav-item active">
      <i class="fa fa-user nav-icon"></i>
      <span>我的</span>
    </a>
  </div>
  
  <!-- 发布按钮 -->
  <button class="fab-button" aria-label="发布内容">
    <i class="fa fa-plus"></i>
  </button>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 关注按钮交互
    document.querySelectorAll('.follow-btn').forEach(btn => {
      btn.addEventListener('click', function() {
        if (this.textContent.trim() === '关注') {
          this.textContent = '已关注';
          this.style.backgroundColor = '#F2F3F5';
          this.style.color = '#86909C';
        } else {
          this.textContent = '关注';
          this.style.backgroundColor = 'var(--primary)';
          this.style.color = 'white';
        }
      });
    });
    
    // 发布按钮点击事件
    document.querySelector('.fab-button').addEventListener('click', function() {
      const modal = document.createElement('div');
      modal.className = 'fixed inset-0 bg-black bg-opacity-50 z-50 flex items-end justify-center';
      modal.innerHTML = `
        <div class="bg-white w-full rounded-t-xl p-5 max-height-[80vh]">
          <div class="text-center mb-6">
            <h3 class="text-lg font-semibold">发布内容</h3>
          </div>
          <div class="grid grid-cols-4 gap-4 text-center">
            <div class="flex flex-col items-center p-3 rounded-lg hover:bg-gray-100 cursor-pointer">
              <div class="w-12 h-12 rounded-full bg-primary-light flex items-center justify-center mb-2">
                <i class="fa fa-pencil text-primary"></i>
              </div>
              <span class="text-sm">发动态</span>
            </div>
            <div class="flex flex-col items-center p-3 rounded-lg hover:bg-gray-100 cursor-pointer">
              <div class="w-12 h-12 rounded-full bg-primary-light flex items-center justify-center mb-2">
                <i class="fa fa-image text-primary"></i>
              </div>
              <span class="text-sm">发相册</span>
            </div>
            <div class="flex flex-col items-center p-3 rounded-lg hover:bg-gray-100 cursor-pointer">
              <div class="w-12 h-12 rounded-full bg-primary-light flex items-center justify-center mb-2">
                <i class="fa fa-file-text-o text-primary"></i>
              </div>
              <span class="text-sm">写文章</span>
            </div>
            <div class="flex flex-col items-center p-3 rounded-lg hover:bg-gray-100 cursor-pointer">
              <div class="w-12 h-12 rounded-full bg-primary-light flex items-center justify-center mb-2">
                <i class="fa fa-video-camera text-primary"></i>
              </div>
              <span class="text-sm">发视频</span>
            </div>
          </div>
          <div class="mt-6">
            <button class="w-full py-3 bg-gray-100 rounded-lg text-gray-700 font-medium" id="cancelPost">取消</button>
          </div>
        </div>
      `;
      document.body.appendChild(modal);
      document.body.style.overflow = 'hidden';
      
      // 取消按钮事件
      modal.querySelector('#cancelPost').addEventListener('click', function() {
        modal.remove();
        document.body.style.overflow = '';
      });
      
      // 点击外部关闭
      modal.addEventListener('click', function(e) {
        if (e.target === modal) {
          modal.remove();
          document.body.style.overflow = '';
        }
      });
    });
  </script>
</body>
</html>
